import { Row, Col } from 'antd'

import Logo from '../logo/index'
import HeadNavModule from '../head-nav/index'
import SignModule from '../sign/index'

import '../../styles/common.css'

/**
 * xs={2} sm={4} md={6} lg={8} xl={10}
 *
 * <Col xs={{ span: 5, offset: 1 }} lg={{ span: 6, offset: 2 }}>
 */
const HeadApp = () => {
  const logoSpan = 2
  const navSpan = 16

  return (
    <>
      <Row gutter={16}>
        <Col
          xs={{ span: 8, push: 8 }}
          sm={{ span: 8, push: 8 }}
          md={{ span: 8, push: 8 }}
          lg={{ span: logoSpan, push: 0 }}
          xl={{ span: logoSpan, push: 0 }}
          className="common-center"
        >
          Logo
          {/* <Logo /> */}
        </Col>
        <Col
          xs={{ span: 8, pull: 8 }}
          sm={{ span: 8, pull: 8 }}
          md={{ span: 8, pull: 8 }}
          lg={{ span: navSpan, pull: 0 }}
          xl={{ span: navSpan, pull: 0 }}
        >
          <HeadNavModule />
        </Col>
        <Col xs={8} sm={6} md={6} lg={6} xl={6}>
          <SignModule />
        </Col>
      </Row>
    </>
  )
}
export default HeadApp
